<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>安手账</title>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="js/vue/2.5.16/vue.min.js"></script>
    <script src="js/axios/0.17.1/axios.min.js"></script>
    <script src="js/moment/2.22.2/moment.js"></script>
    <script>
        function checkDeleteLink(){
            var confirmDelete = confirm("确认要删除");
            if(confirmDelete)
                return true;
            return false;
        };
        $(function(){
            var data4Vue = {
                uri:'billes',
                beans: []
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    this.list();
                },
                methods: {
                    list:function(){
                        var url =  this.uri;
                        axios.get(url).then(function(response) {
                            vue.beans = response.data;
                        });
                    },
                    deleteBill: function (id) {
                        if(!checkDeleteLink())
                            return;
                        var url = this.uri+"/"+id;
                        axios.delete(url).then(function(response){
                            if(0!=response.data.length){
                                alert(response.data);
                            }
                            else{
                                vue.list(0);
                            }
                        });
                    },
                }
            });
        });
        Vue.filter("dateFilter", function(date, formatPattern){
            return moment(date).format(formatPattern || "YYYY-MM-DD HH:mm:ss");
        });
    </script>
</head>
<body ng-app="app" ng-controller="MainController">
<h1>安手账</h1>
<h3 th:text="'登录用户：'"></h3>
<p th:text="${session.user.username}"></p>
<a href="/logout">注销</a>
<a href="/useredit">编辑用户</a>
<a href="/addbill">新增账单</a>
<a href="/type">分类管理</a>
<br>
<br>
<div id="workingArea" >
    <div class="listDataTableDiv">
        <table class="table table-striped table-bordered table-hover  table-condensed">
            <thead>
            <tr class="success">
                <th>收入or支出</th>
                <th>金额</th>
                <th>分类</th>
                <th>备注</th>
                <th>时间</th>
                <th>编辑</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="bean in beans ">
                <td v-if="bean.in_ex === 0">支出</td>
                <td v-else>收入</td>
                <td>{{bean.amount}}</td>
                <td>{{bean.type}}</td>
                <td>{{bean.remarks}}</td>
                <td>{{bean.datetime | dateFilter}}</td>
                <td><a :href="'bill_list_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a></td>
                <td><a href="#nowhere"  @click="deleteBill(bean.id)"><span class="glyphicon glyphicon-trash"></span></a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

</body>
</html>